<script setup>
import BuyPannel from "./BuyPannel.vue";
// import { findNewAPI } from "@/apis/home";
import { ref } from "vue";
import GoodItem from './GoodItem.vue'

//获取数据
const goodsProduct = ref([
{
name:'近期热门',
id:"1005000",
goods:[
  {
  desc:"龙凤玉环",
  id: "1183010",
  picture: "https://pic.imgdb.cn/item/6640b6ad0ea9cb14035bc4c9.png",
  price: "5669.00",
  name: "龙凤玉环",
  orderNum: 5069,
},
{
  desc:"龙纹佩",
  id: "1108008",
  picture: "https://pic.imgdb.cn/item/6640b6ad0ea9cb14035bc4ab.png",
  price: "3489.00",
  name: "龙纹佩",
  orderNum: 5070,
},
{
  desc:"清翠玉鏤雕鳳鳴在竹牌",
  id: "4001880",
  picture: "https://pic.imgdb.cn/item/6640b6ad0ea9cb14035bc43b.png",
  price: "5890.00",
  name: "清翠玉鏤雕鳳鳴在竹牌",
  orderNum: 5071,
},
{
  desc:"清螭龙云纹鸡心佩",
  id: "4026116",
  picture: "https://pic.imgdb.cn/item/6640b6ad0ea9cb14035bc43c.png",
  price: "1659.00",
  name: "清螭龙云纹鸡心佩",
  orderNum: 5072,
},
]
}
]);
console.log(goodsProduct.value);
// const getNewList = async () => {
//   const res = await findNewAPI();
//   console.log(res);
  
//   newList.value = res.result;
// };

// onMounted(() => {
//   getNewList();
// });
</script>

<template>
  <!-- <BuyPannel title="新鲜好物" sub-title="新鲜出炉 品质靠谱"> -->
    <div class="home-product">
    <BuyPannel :title="cate.name" v-for="cate in goodsProduct" :key="cate.id">
      <div class="box">
        <ul class="goods-list">
          <li v-for="goods in cate.goods" :key="goods.id">
            <GoodItem :goods="goods"/>
          </li>
        </ul>
      </div>
    </BuyPannel>
  </div>
  <!-- 下面是插槽主体内容模版
  <ul class="goods-list">
    <li v-for="item in newList" :key="item.id">
      <RouterLink to="/">
        <img :src="item.picture" alt="" />
        <p class="name">{{ item.name }}</p>
        <p class="price">&yen;{{ item.price }}</p>
      </RouterLink>
    </li>
  </ul>
  -->
</template>


<style scoped lang='scss'>
a {
  text-decoration: none;
  color: #333;
  outline: none;
}
img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
  background: #ebebeb url('@/assets/images/200.png') no-repeat center / contain;
}
ul {
  list-style: none;
}
.goods-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  height: 406px;

  li {
    width: 306px;
    height: 406px;

    // background: #f0f9f4;
    transition: all 0.5s;

    // &:hover {
    //   transform: translate3d(0, -3px, 0);
    //   box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
    // }

    img {
      width: 306px;
      height: 306px;
    }

    p {
      font-size: 22px;
      padding-top: 12px;
      text-align: center;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }

    .price {
      color: #cf4444;
    }
  }
}
</style>